<template>
  <div class="playlist-detail">
    <Header />
    <div class="player">
      <van-icon name="arrow-left" @click="goBack" />
      <img :src="listInfo.picUrl" class="player-cover" />
      <h2 class="player-tit">{{listInfo.title}}</h2>
      <p class="player-info">{{listInfo.titleDetail}}</p>
      <p class="player-udatetime">更新时间：{{list.update}}</p>
    </div>
    <div class="count-box">
      <span>排行榜 共{{list.total}}首</span>
    </div>
    <div class="song-list">
      <ul>
        <li v-for="item in rankList" :key="item.id" @click="selectSong(item)">
          <div class="song-list-index">
            <span class="song-no">{{item.rank}}</span>
            <p class="song-rank">
              <span class="song-ranktype">{{getRankType(item.rankType)}} </span>
              <span class="song-rankvalue">{{getRankValue(item.rankValue)}}</span>
            </p>
          </div>
          <div class="song-list-bd">
            <h4 class="song-name">{{item.title}}</h4>
            <p class="song-singer">{{item.singerName}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Header from "@/components/common/Header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      list: [],
      rankList: [],
      listInfo: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .get("/jsososo/top", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(res => {
          //   console.log(res.data);
          this.list = res.data.data;
          this.listInfo = res.data.data.info;
          this.rankList = res.data.data.list;
        })
        .catch(err => {
          console.error(err);
        });
    },
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    toFixed(number, fractionDigits) {
      //number 传入数字
      //fractionDigits 保留小数位数
      var times = Math.pow(10, fractionDigits);
      var roundNum = Math.round(number * times) / times;
      return roundNum.toFixed(fractionDigits);
    },
    getRankType(rankType) {
      switch (rankType) {
        case 1:
          return '⬆';
        case 2:
          return '⬇';
        case 3:
          return '';
        case 6:
          return '⬆';
      }
    },
    getRankValue(rankValue){
        if(rankValue == 0){
            return '';
        }else{
            return rankValue;
        }
    },
    selectSong(item){
      const id = item.id;
      const mid = item.mid;
      this.$router.push({
        path:`/Player/${mid}/${id}`,
      });
    },
  }
};
</script>
<style scoped>
.player {
  position: relative;
  padding-top: 75px;
}
.player-cover {
  height: 200px;
  border-radius: 18px;
  box-shadow: 0 7px 13px rgb(0 0 0 / 21%);
}
.van-icon {
  height: 200px;
  line-height: 200px;
  position: absolute;
  top: 75px;
  left: 0;
  z-index: 1;
  font-size: 40px;
  color: #22d59c;
  cursor: pointer;
}
.van-icon:hover{
    background: hsla(161, 72%, 48%, 0.2);
}
.player-tit {
  color: #121212;
  font-weight: normal;
  font-size: 20px;
  margin: 20px 0 15px 0;
}
.player-info {
  height: 30px;
  font-size: 18px;
  line-height: 30px;
  color: #121212;
  margin: 0;
}
.player-info img {
  height: 22px;
  border-radius: 999px;
  vertical-align: -5px;
  margin-right: 3px;
}
.player-udatetime {
  color: gray;
  margin: 10px 0 20px 0;
}
.count-box {
  text-align: left;
  font-size: 12px;
  color: grey;
  padding: 0 15px;
  margin-bottom: 10px;
}
.song-list li {
  box-sizing: border-box;
  padding: 5px 15px 5px 0;
  height: 60px;
  /* box-sizing: border-box; */
  cursor: pointer;
}
.song-list li:hover {
  background: hsla(161, 72%, 48%, 0.2);
}
.song-list-index {
  float: left;
  color: gray;
  font-size: 16px;
  line-height: 30px;
  width: 15%;
  height: 100%;
}
.song-list-bd {
  width: 85%;
  float: left;
}
.song-no {
  color: #f56273;
  display: block;
  height: 30px;
  line-height: 36px;
}
.song-rank {
  margin: 0;
  font-size: 12px;
  height: 20px;
  line-height: 18px;
}
/* .song-ranktype {
  display: inline-block;
  line-height: 20px;
  height: 20px;
  font-size: 12px;
}
.song-rankvalue {
  display: inline-block;
  line-height: 20px;
  height: 20px;
  font-size: 12px;
} */
.song-name {
  color: #000;
  font-size: 16px;
  margin: 0;
  text-align: left;
  font-weight: normal;
  line-height: 30px;
  height: 30px;
}
.song-singer {
  font-size: 12px;
  margin: 0;
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  -webkit-user-select: none;
  line-height: 20px;
  height: 20px;
}
</style>